<template lang="html">
  <div class="class-timetable">
    <nav-header>
      <template slot="menuBefore">
        <li v-if="graduation === 'graduation'">
          <router-link to="/user/class/class-graduation" tag="a"
            >已毕业班级</router-link
          >
        </li>
        <li v-else>
          <router-link to="/user/class/class-members" tag="a"
            >班级列表</router-link
          >
        </li>
        <li class="gap">&gt;</li>
      </template>
      <li v-text="classNxt" style="color: #999;"></li>
    </nav-header>

    <div class="zh-h5-tabs">
      <el-button type="default" @click="toLink('/user/class/class-management')"
        >成员</el-button
      >
      <el-button type="default" @click="toLink('/user/class/class-post', true)"
        >岗位</el-button
      >
      <el-button type="primary">课程表</el-button>
      <el-button type="default" @click="toLink('/user/class/class-data')"
        >资料</el-button
      >
    </div>

    <div class="zh-tabs">
      <div class="zh-table">
        <header class="header-search">
          <div class="search">
            <div>
              <span class="span_text">学年学期：</span>
              <el-select
                v-model="searchParams.termValue"
                clearable
                placeholder="请选择学年学期"
                style="width: 200px"
                @change="handleChange('term')"
              >
                <el-option
                  v-for="item in termOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>

            <div>
              <span class="span_text">教学周：</span>
              <el-select
                v-model="searchParams.weeksValue"
                clearable
                placeholder="请选择教学周"
                style="width: 240px"
                @change="handleChange('weeks')"
              >
                <el-option
                  v-for="item in weeksOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>

            <el-button @click="handleSearch(false)" type="primary">
              查询
            </el-button>

            <div class="search_btn">
              <el-button type="primary" @click="handleExportClass"
                >导出课表</el-button
              >
            </div>
          </div>
        </header>

        <!-- <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <div class="tab-head">
                        <ul class="tab-list">
                            <li>
                                <div class="first-box">
                                    <div></div>
                                    <p></p>
                                    <span class="s1">星期</span> <span class="s2">节次</span>
                                </div>
                            </li>
                            <li>一</li>
                            <li>二</li>
                            <li>三</li>
                            <li>四</li>
                            <li>五</li>
                            <li>六</li>
                            <li>日</li>
                        </ul>
                    </div>
                    <div class="tab-body">
                        <ul class="tab-list" v-for="(time, inx) in listData">
                            <li>
                                {{time.section}}<span>({{time.start_time}}~{{time.end_time}})</span>
                            </li>
                            <li @drop='drop($event, days, time.section)' @dragover='allowDrop($event)' v-for='(day, days) in time.week' :ref="'day-' + days">{{day.course}}</li>
                        </ul>
                    </div>
                </div> -->

        <div>
          <div class="class_time_header">
            <div class="class_date">
              <span class="date_title" v-if="tableHeaderData.week.week_name"
                >{{ tableHeaderData.week.week_name }} 课表</span
              >

              <span v-if="tableHeaderData.week.start_time"
                >({{ tableHeaderData.week.start_time }} ~
                {{ tableHeaderData.week.end_time }})</span
              >
            </div>
          </div>

          <div class="time_table">
            <el-table
              class="video_table"
              :data="listData"
              border
              max-height="600"
              style="width: 100%"
            >
              <el-table-column
                prop="section"
                label="节次"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div class="class_section">
                    <span>{{ scope.row.section_name }}</span>
                    <span>{{ scope.row.section_time }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="monday"
                :label="'周一' + formatTime(tableHeaderData.week_data[0].date)"
                align="center"
                show-overflow-tooltip
                :class-name="
                  !tableHeaderData.week_data[0].date ? 'disable_col' : ''
                "
              >
                <template slot-scope="scope">
                  <div class="class_course" v-if="scope.row.monday">
                    <div class="section_info">
                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/class.png"
                          alt=""
                        />
                        <span> {{ scope.row.monday.subject_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/tea.png"
                          alt=""
                        />
                        <span>{{ scope.row.monday.teacher_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/ring.png"
                          alt=""
                        />
                        <span>{{ scope.row.monday.classroom_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/camera.png"
                          alt=""
                        />
                        <span> {{ scope.row.monday.live_status_str }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="tuesday"
                :label="'周二' + formatTime(tableHeaderData.week_data[1].date)"
                align="center"
                show-overflow-tooltip
                :class-name="
                  !tableHeaderData.week_data[1].date ? 'disable_col' : ''
                "
              >
                <template slot-scope="scope">
                  <div class="class_course" v-if="scope.row.tuesday">
                    <div class="section_info">
                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/class.png"
                          alt=""
                        />
                        <span> {{ scope.row.tuesday.subject_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/tea.png"
                          alt=""
                        />
                        <span>{{ scope.row.tuesday.teacher_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/ring.png"
                          alt=""
                        />
                        <span>{{ scope.row.tuesday.classroom_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/camera.png"
                          alt=""
                        />
                        <span> {{ scope.row.tuesday.live_status_str }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="wednesday"
                :label="'周三' + formatTime(tableHeaderData.week_data[2].date)"
                align="center"
                show-overflow-tooltip
                :class-name="
                  !tableHeaderData.week_data[2].date ? 'disable_col' : ''
                "
              >
                <template slot-scope="scope">
                  <div class="class_course" v-if="scope.row.wednesday">
                    <div class="section_info">
                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/class.png"
                          alt=""
                        />
                        <span> {{ scope.row.wednesday.subject_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/tea.png"
                          alt=""
                        />
                        <span>{{ scope.row.wednesday.teacher_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/ring.png"
                          alt=""
                        />
                        <span>{{ scope.row.wednesday.classroom_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/camera.png"
                          alt=""
                        />
                        <span> {{ scope.row.wednesday.live_status_str }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="thursday"
                :label="'周四' + formatTime(tableHeaderData.week_data[3].date)"
                align="center"
                show-overflow-tooltip
                :class-name="
                  !tableHeaderData.week_data[3].date ? 'disable_col' : ''
                "
              >
                <template slot-scope="scope">
                  <div class="class_course" v-if="scope.row.thursday">
                    <div class="section_info">
                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/class.png"
                          alt=""
                        />
                        <span> {{ scope.row.thursday.subject_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/tea.png"
                          alt=""
                        />
                        <span>{{ scope.row.thursday.teacher_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/ring.png"
                          alt=""
                        />
                        <span>{{ scope.row.thursday.classroom_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/camera.png"
                          alt=""
                        />
                        <span> {{ scope.row.thursday.live_status_str }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="friday"
                :label="'周五' + formatTime(tableHeaderData.week_data[4].date)"
                align="center"
                show-overflow-tooltip
                :class-name="
                  !tableHeaderData.week_data[4].date ? 'disable_col' : ''
                "
              >
                <template slot-scope="scope">
                  <div class="class_course" v-if="scope.row.friday">
                    <div class="section_info">
                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/class.png"
                          alt=""
                        />
                        <span> {{ scope.row.friday.subject_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/tea.png"
                          alt=""
                        />
                        <span>{{ scope.row.friday.teacher_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/ring.png"
                          alt=""
                        />
                        <span>{{ scope.row.friday.classroom_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/camera.png"
                          alt=""
                        />
                        <span> {{ scope.row.friday.live_status_str }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="saturday"
                :label="'周六' + formatTime(tableHeaderData.week_data[5].date)"
                align="center"
                show-overflow-tooltip
                :class-name="
                  !tableHeaderData.week_data[5].date ? 'disable_col' : ''
                "
              >
                <template slot-scope="scope">
                  <div class="class_course" v-if="scope.row.saturday">
                    <div class="section_info">
                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/class.png"
                          alt=""
                        />
                        <span> {{ scope.row.saturday.subject_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/tea.png"
                          alt=""
                        />
                        <span>{{ scope.row.saturday.teacher_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/ring.png"
                          alt=""
                        />
                        <span>{{ scope.row.saturday.classroom_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/camera.png"
                          alt=""
                        />
                        <span> {{ scope.row.saturday.live_status_str }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="sunday"
                :label="'周日' + formatTime(tableHeaderData.week_data[6].date)"
                align="center"
                show-overflow-tooltip
                :class-name="
                  !tableHeaderData.week_data[6].date ? 'disable_col' : ''
                "
              >
                <template slot-scope="scope">
                  <div class="class_course" v-if="scope.row.sunday">
                    <div class="section_info">
                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/class.png"
                          alt=""
                        />
                        <span> {{ scope.row.sunday.subject_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/tea.png"
                          alt=""
                        />
                        <span>{{ scope.row.sunday.teacher_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/ring.png"
                          alt=""
                        />
                        <span>{{ scope.row.sunday.classroom_name }}</span>
                      </div>

                      <div>
                        <img
                          src="../../../../static/image/affairs/ai/camera.png"
                          alt=""
                        />
                        <span> {{ scope.row.sunday.live_status_str }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const mockData = {
  term: {},
  week: {},
  week_data: [{}, {}, {}, {}, {}, {}, {}]
};
// 枚举星期
const enumDateWeek = {
  "1": "周一",
  "2": "周二",
  "3": "周三",
  "4": "周四",
  "5": "周五",
  "6": "周六",
  "7": "周日"
};

// 根据number枚举日期
const enmuDateText = {
  1: "monday",
  2: "tuesday",
  3: "wednesday",
  4: "thursday",
  5: "friday",
  6: "saturday",
  7: "sunday"
};
export default {
  data() {
    return {
      searchParams: {
        termValue: "",
        weeksValue: ""
      },
      termOptions: [],
      weeksOptions: [],
      sectionData: [],
      loading: {
        status: false,
        txt: "获取数据..."
      },
      value: "",
      copyTxt: "",
      classNxt: "",
      graduation: "",
      subject_id: null,
      roleData: [],
      listData: [],
      sendData: {},
      tableHeaderData: mockData //课表表头数据
    };
  },
  created() {
    this.getClassName();
    this.getTermOption();
    this.getData();
  },
  computed: {
    // 格式化整理时间日期
    formatTime() {
      return day => {
        if (day) {
          const match = day.match(/\-/); // 匹配第一个点
          if (match) {
            // 截取字符串
            const dayText = day.substring(match.index + 1);
            return `(${dayText})`;
          }
        } else {
          return "";
        }
      };
    }
  },
  mounted() {
    if (
      !is_empty(this.$route.query.class) &&
      this.$route.query.class === "graduation"
    ) {
      this.graduation = "graduation";
    } else {
      this.graduation = "";
    }
  },
  methods: {
    // 查询
    handleSearch(isInit) {
      this.getDateAndWeek(isInit);
    },

    // 获取当前日期时间
    handleDateFormat() {
      const date = new Date();
      // 获取年、月、日
      const year = date.getFullYear();
      let month = date.getMonth() + 1; // 月份是从0开始计数的，所以要加1
      let day = date.getDate();

      // 如果月份或日期是单个数字，则在前面补0
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;

      return year + "-" + month + "-" + day;
    },

    // 转换一下weeks数据 有时开始的周不一定是星期一开始 需要补够七天
    tranWeeksData(originData) {
      const week_data = [];
      for (let i = 1; i <= 7; i++) {
        const findWeek = originData.week_data.find(item => item.date_num == i);
        if (findWeek) {
          week_data.push(findWeek);
        } else {
          week_data.push({});
        }
      }
      originData.week_data = week_data;
      return originData;
    },

    // 获取周时间、以及学期 判断当前时间是否超过了学期结束时间 如果没有过则定位到当前周，如果已过则定位到第一周
    getDateAndWeek(isInit) {
      const termData =
        this.termOptions.find(
          item => item.id === this.searchParams.termValue
        ) || {};
      const params = {};
      if (isInit) {
        const termEnd = new Date(termData.end_time);
        const termStart = new Date(termData.start_time);
        const nowDate = new Date(this.handleDateFormat());

        // 当前学期是否开始
        if (termStart < nowDate) {
          // 已开始
          if (nowDate < termEnd) {
            // 在当前学期内
            params.select_time = "";
          } else {
            // 已结束 默认选中第一个
            this.searchParams.weeksValue = this.weeksOptions[0].value || "";
            const weeks = this.weeksOptions.find(
              item => item.week_num === this.searchParams.weeksValue
            );
            params.select_time = weeks.start_time;
          }
        } else {
          // 未开始 默认选中第一个
          this.searchParams.weeksValue = this.weeksOptions[0].value || "";
          const weeks = this.weeksOptions.find(
            item => item.week_num === this.searchParams.weeksValue
          );
          params.select_time = weeks.start_time;
        }
      } else {
        const { weeksValue } = this.searchParams;
        if (!weeksValue) return this.$message.error("请选择教学周");
        const weeks = this.weeksOptions.find(
          item => item.week_num === weeksValue
        );
        params.select_time = weeks.start_time;
      }

      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.searchParams.weeksValue = data.week.week_num || "";

          const transData = this.tranWeeksData(data);
          // 表头日期
          this.tableHeaderData = transData;

          // 选项日期
          this.dateOptions = data.week_data
            .filter(item => item.date_num)
            .map(item => {
              return {
                value: Number(item.date_num),
                label: enumDateWeek[item.date_num]
              };
            });

          this.getTimeTable();
        }
      };
      this.$ajax.get("api/term/getNowTermWeekTime", {
        params,
        func: { success }
      });
    },
    // 获取周选项
    getWeeksOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.weeksOptions = data.map(item => {
            const { week_name, week_num } = item;
            return {
              value: week_num,
              label: week_name,
              ...item
            };
          });
          this.handleSearch(true);
        }
      };
      const params = {
        term_id: this.searchParams.termValue
      };
      this.$ajax.get("api/term/getTermWeekTimeList", {
        params,
        func: { success }
      });
    },
    // 获取学期选项
    getTermOption() {
      const success = res => {
        const { status, data } = res;
        if (status === "success") {
          this.termOptions = data.map(item => {
            return {
              value: item.id,
              label: `${item.start_year}-${item.semester_name}`,
              ...item
            };
          });

          // 默认选中第一个
          this.searchParams.termValue = this.termOptions[0].value || "";
          this.getWeeksOption();
        }
      };

      this.$ajax.get("api/term/term_list", { func: { success } });
    },

    // 周一到周日的课程 单周课表
    generateSingleClassData() {
      const singleWeek = [];
      this.sectionData.forEach(item => {
        const sigleData = {
          section: item.section,
          monday: "",
          tuesday: "",
          wednesday: "",
          thursday: "",
          friday: "",
          saturday: "",
          sunday: "",
          ...item
        };
        singleWeek.push(sigleData);
      });

      return singleWeek;
    },

    // 处理Listdata数据
    formatListData(listData) {
      const tableColum = this.generateSingleClassData();

      if (listData.length) {
        // 将对应的星期数据赋值给制定的字段
        const weekCourse = listData.reduce((acc, curr) => {
          const foundIndex = acc.findIndex(
            item => item.section === curr.section
          );
          if (foundIndex !== -1) {
            const key = enmuDateText[curr.week];
            acc[foundIndex][key] = curr;
            acc[foundIndex].sectionTime = {
              start_time: curr.start_time,
              end_time: curr.end_time
            };
          }
          return acc;
        }, tableColum);

        return weekCourse;
      } else {
        return tableColum;
      }
    },

    // 选择器value变化
    handleChange(type) {
      switch (type) {
        case "term":
          if (this.searchParams.termValue) {
            this.getWeeksOption();
          } else {
            this.weeksOptions = [];
            this.searchParams.weeksValue = "";
          }
          break;
        case "weeks":
          break;
      }
    },

    // 导出课表
    handleExportClass() {
      const { weeksValue } = this.searchParams;

      if (!weeksValue) {
        return this.$message.error("请选择查询参数");
      }

      const weeks = this.weeksOptions.find(
        item => item.week_num === weeksValue
      );
      const params = {
        class_id: this.$route.params.id,
        start_time: weeks.start_time,
        end_time: weeks.end_time
      };

      const termName = this.termOptions.find(
        item => item.value === this.searchParams.termValue
      ).label;
      const weekName = this.tableHeaderData.week.week_name;

      const exportName = `${termName} ${this.classNxt} ${weekName}课表`;

      this.$ajax.post("api/school/syllabusExport", params).then(res => {
        if (!res.data.data) {
          this.export_excel("api/school/syllabusExport", params, exportName);
        }
      });
    },

    getClassName() {
      let success = data => {
        this.classNxt = data.data[0] ? data.data[0].rename : "";
      };
      let params = {
        id: this.$route.params.id
      };

      if (this.$route.query.class === "graduation") {
        params.status = 3;
      }

      this.$ajax.get("api/org/org", {
        params: params,
        func: { success: success }
      });
    },
    getSubjects() {
      /*获取科目*/
      let params = {
        // class_id: this.$route.params.id
        status: 1,
        type: 1
      };
      const success = res => {
        this.roleData = res.data;
      };
      this.$ajax.get("api/newlevel/platform_subject", {
        params: params,
        func: { success: success }
      });
    },
    getData() {
      /*获取课时*/
      this.loading.status = true;
      /** 数组清空操作放在请求成功后，不起作用，暂无发现原因 */
      this.listData = null;

      const success = res => {
        this.sectionData = res.data.map(item => {
          return {
            ...item,
            value: item.section,
            label: item.section_name
          };
        });
      };
      const fail = data => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };
      this.$ajax.get("api/school/timeset", {
        params: {},
        func: { success: success, fail: fail }
      });
    },
    getTimeTable() {
      /*获取每日各课时课程*/
      const { weeksValue } = this.searchParams;
      if (!weeksValue) return this.$message.error("请选择教学周");

      const weeks = this.weeksOptions.find(
        item => item.week_num === weeksValue
      );
      const params = {
        class_id: this.$route.params.id,
        start_time: weeks.start_time,
        end_time: weeks.end_time
      };
      const success = res => {
        this.listData = this.formatListData(res.data);
      };
      this.$ajax.get("api/school/syllabus", {
        params: params,
        func: { success: success }
      });
    },

    toLink(link, flag) {
      if (flag && this.graduation === "graduation") {
        this.$router.push(
          "/user/class/class-post-setting/" +
            this.$route.params.id +
            "?class=graduation"
        );
      } else {
        this.$router.push(
          link +
            "/" +
            this.$route.params.id +
            (this.graduation ? "?class=" + this.graduation : "")
        );
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.class-timetable {
  // -webkit-user-select: none;
  // -moz-user-select: none;
  // -ms-user-select: none;
  // user-select: none;

  .zh-h5-tabs {
    padding-bottom: 20px;
  }

  .zh-open-left {
    div[draggable] {
      display: inline-block;
      margin-right: 10px;
      padding: 9px 15px;
      font-size: 12px;
      line-height: 12px;
      border-radius: 3px;
      border: 1px solid #dddddd;
    }
  }

  .zh-open-right {
    .upload-demo {
      display: inline-block;
      .el-upload-list {
        display: none;
      }
    }
  }
  .tab-list {
    width: 100%;
    display: flex;
    border-left: 1px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;
    li {
      flex: 1;
      text-align: center;
      height: 36px;
      line-height: 36px;
      border-right: 1px solid #f2f2f2;
      border-bottom: 1px solid #f2f2f2;
      overflow: hidden;
      &:first-child {
        flex: 0 0 130px;
      }
    }
  }
  .tab-btns {
    button {
      cursor: move;
    }
  }

  .tab-btns:hover {
    cursor: pointer;
  }

  .tab-head {
    .tab-list {
      li {
        &:first-child {
          .first-box {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            div {
              width: 0;
              height: 0;
              border-width: 0px 130px 36px 1px;
              border-style: solid;
              border-color: #f2f2f2 white;
            }
            p {
              width: 0;
              height: 0;
              border-width: 0px 130px 36px 0px;
              border-style: solid;
              border-color: black transparent white white;
              position: absolute;
              top: 1px;
              left: 0;
              margin: 0;
            }
            .s1 {
              position: absolute;
              bottom: 7px;
              right: 12px;
            }
            .s2 {
              position: absolute;
              left: 12px;
              top: 7px;
            }
          }
        }
      }
    }
  }
  .tab-body {
    .tab-list {
      border-top: 0;
    }
  }
}

.header-search {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search {
    display: flex;
    margin-right: 10px;
    div {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }

    .span_text {
      width: 70px;
    }
  }

  .search_btn {
    display: flex;
    margin-left: 10px;
    width: 270px;
  }
}

.class_time_header {
  display: flex;
  margin-top: 26px;
  justify-content: space-between;

  .class_date {
    display: flex;
    align-items: center;
    justify-content: center;

    .date_title {
      font-size: 20px;
      font-weight: bold;
      margin-right: 5px;
    }
  }
}

.time_table {
  display: flex;
  justify-content: center;
  align-items: center;

  /deep/ td {
    width: 199px !important;
    height: 132px !important;
  }
}

.video_table {
  margin-top: 10px;

  margin-left: 10px;
  margin-right: 10px;
  .class_section {
    display: flex;
    flex-direction: column;
  }

  .class_course {
    display: flex;
    flex-direction: column;

    .section_header {
      display: flex;
      justify-content: end;

      span {
        cursor: pointer;
        margin: 0 2px;

        img {
          width: 16px;
          height: 16px;
        }
      }
    }

    .section_info {
      margin-left: 8px;
      display: flex;
      flex-direction: column;
      align-items: baseline;

      div {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
      }
    }
  }

  .class_add {
    font-size: 30px;
    color: #a4b4c7;
    cursor: pointer;
  }

  .disable_add {
    cursor: not-allowed;
  }
}
</style>
